<template>
    <div>
        <h1 class="el-icon-s-unfold"></h1>
        <el-breadcrumb separator="/" class="crumb">
            <el-breadcrumb-item v-for="item in crumbList" :key="item.meta.title">{{ item.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    name: 'crumb',
    computed: {
        crumbList(){
            return this.$route.matched
        }
    },
    data(){
        return {}
    },
}
</script>

<style scoped>
    .el-breadcrumb-item span .el-breadcrumb__inner{
        color: #fff !important;
    }
    >>>.el-breadcrumb__inner{
        color:#fff;
    }
    .crumb{
        /* background-color: red; */
        width: 500px;
        position: absolute;
        left: 260px;
        top: 21px;
        font-size: 20px;
        color: #fff;
        user-select: none;
    }
    h1{
        position: absolute;
        left: 220px;
        top: -6px;
        width: 40px;
        height: 40px;
        color: #fff;
    }
    >>>.el-breadcrumb__item:last-child span:nth-child(1){
        color: #20AAE9 !important;
        text-shadow: 1px 1px 10px #20AAE9;
    }
</style>